<template>
  <div class="user-profile">
    <!-- 返回按钮 -->
    <el-button
        class="back-button"
        :icon="Back"
        size="small"
        @click="handleBack"
    >
      返回
    </el-button>
    <el-card class="user-card">
      <!-- 基本信息部分 -->
      <div class="user-basic-info">
        <img :src="user.avatar" alt="User Avatar" class="user-avatar"/>
        <h2>{{ user.name }}</h2>
        <p class="user-email">
          <mail style="margin-right: 10px; color: #222222"/>
          {{ user.email }}
        </p>
        <p class="user-join-date">注册时间：{{ user.joinDate }}</p>
      </div>

      <!-- 用户内容展示部分 -->
      <div class="user-content">
        <div class="user-favorites">
          <h3>收藏的餐厅</h3>
          <el-row :gutter="15">
            <el-col :span="12" v-for="restaurant in paginatedFavorites" :key="restaurant.id"
                    style="margin-bottom: 15px">
              <el-card class="restaurant-card">
                <img :src="restaurant.image" alt="Restaurant Image" class="restaurant-image"/>
                <div class="restaurant-info">
                  <h4>{{ restaurant.name }}</h4>
                  <el-text size="small">
                    <el-icon>
                      <Location/>
                    </el-icon>
                    {{ restaurant.location }}
                  </el-text>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 分页 -->
          <el-pagination
              v-if="user.favorites.length > pageSize"
              :current-page="currentPage"
              :page-size="pageSize"
              :total="user.favorites.length"
              layout="prev, pager, next"
              @current-change="handlePageChange"
          ></el-pagination>
        </div>

        <!-- 用户历史记录 -->
        <div class="user-history">
          <h3>历史操作记录</h3>
          <el-timeline>
            <el-timeline-item
                v-for="activity in user.history"
                :key="activity.id"
                :timestamp="activity.date"
                type="primary"
            >
              <el-card class="activity-card">
                <h4>{{ activity.type }}</h4>
                <p>{{ activity.details }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {computed, ref} from 'vue';
import {ElCard, ElCol, ElPagination, ElRow, ElTimeline, ElTimelineItem} from 'element-plus';
import {Back, Mail} from "@icon-park/vue-next";
import restaurant1 from "@/assets/img1.jpg"
import restaurant2 from "@/assets/img2.jpg"
import restaurant3 from "@/assets/img3.jpg"
import restaurant4 from "@/assets/img4.jpg"
import avatar1 from "@/assets/avatar1.jpg"
import {Location} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";

const user = ref({
  name: '小小怪',
  avatar: avatar1,
  email: 'xiaoxiaoguai@qq.com',
  joinDate: '2024-01-01',
  favorites: [
    {id: 1, name: 'KFCD', location: '德盛广场', image: restaurant1},
    {id: 2, name: '银河餐厅', location: '银河系', image: restaurant2},
    {id: 3, name: '水星餐厅', location: '水星', image: restaurant3},
    {id: 4, name: '火星餐厅', location: '火星', image: restaurant4},
    {id: 5, name: '地球餐厅', location: '地球', image: restaurant4},
    {id: 6, name: '月亮餐厅', location: '月球', image: restaurant3},
    {id: 7, name: '木星餐厅', location: '木星环', image: restaurant2},
    {id: 8, name: '太阳餐厅', location: '太阳系', image: restaurant1},
  ],
  history: [
    {id: 1, type: '评论', details: '对招牌牛排的评论', date: '2024-11-20'},
    {id: 2, type: '收藏', details: '收藏了KFCD餐厅', date: '2024-10-15'},
    {id: 3, type: '收藏', details: '收藏了太阳餐厅', date: '2024-10-14'},
    {id: 4, type: '收藏', details: '收藏了木星餐厅', date: '2024-10-13'},
    {id: 5, type: '收藏', details: '收藏了地球餐厅', date: '2024-10-12'},
  ]
});

const currentPage = ref(1);
const pageSize = 4; // 每页显示4个餐厅

// 计算分页后的餐厅列表
const paginatedFavorites = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  const end = start + pageSize;
  return user.value.favorites.slice(start, end);
});

// 处理分页变化
const handlePageChange = (page) => {
  currentPage.value = page;
};

const router = useRouter();
// 返回按钮事件
const handleBack = () => {
  router.back();
  console.log('返回按钮点击');
};
</script>

<style scoped>
.user-profile {
  max-width: 1000px;
  margin: 40px auto;
  padding: 20px;
  background-color: #f9fafb;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.back-button {
  position: absolute;
  top: 1%;
  left: 2%;
  background-color: #42b983;
  color: white;
  border-radius: 8px;
  border: none;
  font-size: 16px;
}

.user-card {
  background-color: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.user-basic-info {
  text-align: center;
  margin-bottom: 30px;
}

.user-avatar {
  min-width: 80px;
  width: 13%;
  border-radius: 50%;
  margin: 20px 0;
  border: 4px solid #f0f0f0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.user-email,
.user-join-date {
  color: #666;
  font-size: 15px;
}

.user-content {
  display: flex;
  justify-content: space-between;
}

.user-favorites {
  width: 48%;
}

.user-history {
  width: 48%;
  max-height: 750px; /* 限制最大高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
}

.user-history h3 {
  position: sticky;
  top: 0;
  background-color: #fff;
  padding: 10px 0;
  font-size: 20px;
  margin-bottom: 20px;
  color: #333;
  z-index: 1; /* 确保标题在滚动时显示在最上层 */
}

h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #333;
}

.restaurant-card {
  display: flex;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.restaurant-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 16px;
}

.restaurant-info {
  flex-grow: 1;
}

.restaurant-info h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.restaurant-info p {
  font-size: 14px;
  color: #777;
}

.activity-card {
  background-color: #fafafa;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.activity-card p {
  font-size: 14px;
  color: #555;
}

.el-timeline-item {
  padding-left: 16px;
}

.el-timeline-item .el-timeline-item-head {
  background-color: #42b983;
  border-color: #42b983;
}

.el-timeline-item .el-timeline-item-content {
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
